<template>
	<view class="tag" :style="styleCustom">{{floatNum}}</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: [String, null],
				default: null,
			},
			color: {
				type: String,
				default: "",
			},
			plain: {
				type: Boolean,
				default: false,
			},
			cusStyle: {
				type: String,
				default: ''
			}
		},
		computed: {
			floatNum() {
				return this.text
			},
			styleCustom() {
				if (this.plain) {
					return `border-color:${this.color};color:${this.color};${this.cusStyle}`
				} else {
					return `background:${this.color};${this.cusStyle}`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		display: inline-block;
		border-radius: 10rpx;
		border: 1px solid transparent;
		padding: 8rpx 15rpx;
		color: #ffffff;
		font-size: 24rpx;
		text-align: center;
		margin-right: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 5rpx;
	}
</style>